import React from 'react';
import { Layout, ConfigProvider, theme } from 'antd';
import { useAppSelector } from '../store';
import { selectTheme } from '../store/slices/uiSlice';

const { Content } = Layout;

interface AuthLayoutProps {
  children: React.ReactNode;
}

const AuthLayout: React.FC<AuthLayoutProps> = ({ children }) => {
  const currentTheme = useAppSelector(selectTheme);

  // 主题配置
  const themeConfig = {
    algorithm: currentTheme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
    token: {
      colorPrimary: '#1890ff',
      borderRadius: 6,
    },
  };

  return (
    <ConfigProvider theme={themeConfig}>
      <Layout style={{ minHeight: '100vh' }}>
        <Content
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            background: currentTheme === 'dark' 
              ? 'linear-gradient(135deg, #1f1f1f 0%, #2d2d2d 100%)'
              : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          }}
        >
          <div
            style={{
              width: '100%',
              maxWidth: '400px',
              padding: '0 24px',
            }}
          >
            {children}
          </div>
        </Content>
      </Layout>
    </ConfigProvider>
  );
};

export default AuthLayout;
